<template>
	<view class="container-white" v-if="totalCount > 0">
		<view class="head flex-box" style="padding: 30upx 20upx;">
			<view>
				<text v-if="topic.quesType == 1">单选题</text>
				<text v-if="topic.quesType == 2">多选题</text>
				<text v-if="topic.quesType == 3">判断题</text>
			</view>
			<view>{{topicIndex}}/{{totalCount}}</view>
		</view>

		<view class="topic-box">
			<!-- <rich-text v-if='topic.quesInfo' :nodes="topic.quesInfo" class="questions"></rich-text>
      <view v-if="topic.info">{{topic.info}}</view>-->
			<rich-text v-if="topic.info" :nodes="topic.info" class="questions"></rich-text>
			<view class="answer">
				<view class="options" v-for="(item,index) in topic.optionsBeans" @click="checkOptions(index)" :key="index">
					<view v-if="true">
						<view v-if="topic.quesType == 3" class="stide" :class="item.checked?(item.status?'correct':'mistake'):(item.status?'correct':'')">
							<image :src="item.checked?(item.status?'/static/icon/correct.png':'/static/icon/error.png'):(item.status?'/static/icon/correct.png':'')"
							 style="width: 60upx;height: 60upx;" />
						</view>
						<view v-else class="stide" :class="item.checked?(item.status?'correct':'mistake'):(item.status?'correct':'')">
							<view v-if="!item.checked">{{item.key}}</view>
							<image v-else :src="item.status?'/static/icon/correct.png':'/static/icon/error.png'" style="width: 60upx;height: 60upx;" />
						</view>
					</view>
					<view v-else>
						<view v-if="topic.quesType == 3" class="stide" :class="item.checked === true?'isCheck':''"></view>
						<view v-else class="stide" :class="item.checked === true?'isCheck':''">{{item.key}}</view>
					</view>
					<view style="flex:1">{{item.option}}</view>
				</view>
			</view>
		</view>

		<view class="topic-box">
			<button v-if="topic.quesType == 2" type="primary" size="mini" class="primary" style="width: 200upx;margin-right: 20upx;"
			 @click="checkUserAnsw">确定</button>
			<view v-if="showAnsw" style="margin-top: 20upx;">
				<view style="font-size:28upx;color: #999999;">矿校云提醒您</view>
				<view class="flex-box">
					<view v-if="topic.quesType == 3" style="flex: 1;">
						正确答案：
						<text style="color: #02A8F4;">{{topic.rightAnsw == 'A'?'正确':'错误'}}</text>
					</view>
					<view v-else style="flex: 1;">
						正确答案：
						<text style="color: #02A8F4;">{{topic.rightAnsw}}</text>
					</view>
					<view style="flex: 1;">
						您的答案：
						<text style="color: #02A8F4;">{{topic.selfAnsw}}</text>
					</view>
				</view>
			</view>
		</view>

		<view class="footer" v-if="totalCount > 1">
			<button v-if="topicIndex>1 || topicIndex == totalCount" type="primary" class="primary footer-btn" @click="goPrevious">上一题</button>
			<view v-if="topicIndex>1 && topicIndex<totalCount" class="cut-off"></view>
			<button v-if="topicIndex<totalCount" type="primary" class="primary footer-btn" @click="goNext">下一题</button>
		</view>
	</view>
	<view class="no-data" v-else>暂无数据</view>
</template>
<script>
	import {
		post_md5
	} from '../../common/request'
	import {
		formatSeconds
	} from '../../common/common'
	var time = 0
	export default {
		data() {
			return {
				keep: -1,
				isCollect: true,
				topicIndex: 1,
				topic: {},
				totalCount: 0,
				quesCateId: '',
				showAnsw: false,
				isCheckOptions: true
			}
		},
		onLoad(options) {
			this.quesCateId = options.quesCateId
			this.topicIndex = !isNaN(options.page) ? options.page : 1
			this.keep = !isNaN(options.page) ? 1 : -1
		},
		onShow() {
			// this.topicIndex = uni.getStorageSync('practiceIndex')
			this.getExam()
		},
		onBackPress() {
			let practiceList = JSON.parse(uni.getStorageSync('practiceList'))
			practiceList[`${this.quesCateId}`] = this.topicIndex
			uni.setStorageSync('practiceList', JSON.stringify(practiceList))
			this.saveTopic()
		},
		onNavigationBarButtonTap(e) {
			if (e.index == 0) {
				if (this.totalCount > 0 && this.isCollect) {
					this.collect()
				}
			}
			if (e.index == 1) {
				uni.navigateTo({
					url: 'practice-scantron?id=' + this.quesCateId
				})
			}
		},
		methods: {
			// 获取题库
			getExam() {
				const params = {
					quesCateId: this.quesCateId,
					keep: this.keep,
					userId: uni.getStorageSync('userId'),
					page: this.topicIndex
				}
				post_md5('/exam-app/craftbank/cateques', params).then(res => {
					if (res.data && res.data.list.length > 0) {
						this.topic = res.data.list[0]
						this.topicIndex = res.data.currPage
						this.totalCount = res.data.totalCount
						this.keep = -2
						this.selectCollect()
						if (this.topic.selfAnsw) {
							this.isCheckOptions = false
							this.checkUserAnsw()
							this.showAnsw = true
						} else {
							this.isCheckOptions = true
						}
					} else {
						this.totalCount = 0
						// #ifdef APP-PLUS
						var webView = this.$mp.page.$getAppWebview()
						webView.setTitleNViewButtonStyle(0, {
							text: ''
						})
						// #endif
					}
				})
			},
			// 选择选项
			checkOptions(index) {
				if (this.isCheckOptions) {
					let data = this.topic.optionsBeans
					if (parseInt(this.topic.quesType) === 2) {
						data[index].checked = !data[index].checked
						data[index].status = !data[index].status
					} else {
						data.forEach(x => {
							x.checked = false
							x.status = false
						})
						data[index].checked = true
						data[index].status = true
						this.checkUserAnsw()
					}
				}
			},

			checkUserAnsw() {
				this.topic.optionsBeans.forEach(x => {
					x.status = false
					this.topic.rightAnsw.split('').forEach(j => {
						if (x.key == j) {
							x.status = true
						}
					})
				})
				this.topic.selfAnsw = this.topic.optionsBeans
					.filter(x => x.checked)
					.map(x => x.key)
					.sort()
					.join('')
				this.showAnsw = true
				this.isCheckOptions = false
				this.saveTopic()
			},

			// 下一题
			goNext() {
				this.showAnsw = false
				if (this.topicIndex + 1 < this.totalCount + 1) {
					this.topicIndex++
					this.getExam()
				}
			},
			// 上一题
			goPrevious() {
				this.showAnsw = false
				if (this.topicIndex > 1) {
					this.topicIndex--
					this.getExam()
				}
			},

			// 查询收藏信息
			selectCollect() {
				const params = {
					examType: 5,
					type: 3,
					userId: uni.getStorageSync('userId'),
					idInfo: this.topic.id
				}
				post_md5('/usercenter-app/collect/iscollect', params, false).then(res => {
					this.topic.collect = res.data
					// #ifdef APP-PLUS
					var webView = this.$mp.page.$getAppWebview()
					if (res.data == -1) {
						webView.setTitleNViewButtonStyle(0, {
							text: '\ue603'
						})
					} else {
						webView.setTitleNViewButtonStyle(0, {
							text: '\ue6c8'
						})
					}
					// #endif
				})
			},

			// 收藏
			collect() {
				this.isCollect = false
				if (
					this.topic.collect &&
					this.topic.collect != null &&
					this.topic.collect != -1
				) {
					const params = {
						id: this.topic.collect
					}
					post_md5('/usercenter-app/collect/cancelcollect', params, false).then(
						res => {
							this.topic.collect = res.data
							// #ifdef APP-PLUS
							var webView = this.$mp.page.$getAppWebview()
							webView.setTitleNViewButtonStyle(0, {
								text: '\ue603'
							})
							uni.showToast({
									title: '取消收藏',
									icon: 'none'
								},
								500
							)
							// #endif
							this.isCollect = true
						}
					)
				} else {
					const params = {
						examType: 5,
						type: 3,
						userId: uni.getStorageSync('userId'),
						idInfo: this.topic.id
					}
					post_md5('/usercenter-app/collect/collectInfo', params, false).then(
						res => {
							this.topic.collect = res.data
							// #ifdef APP-PLUS
							var webView = this.$mp.page.$getAppWebview()
							webView.setTitleNViewButtonStyle(0, {
								text: '\ue6c8'
							})
							uni.showToast({
									title: '收藏成功',
									icon: 'none'
								},
								500
							)
							// #endif
							this.isCollect = true
						}
					)
				}
			},

			// 保存记录
			saveTopic() {
				const params = {
					page: this.topicIndex,
					quesCateId: this.quesCateId,
					quesId: this.topic.id,
					userId: uni.getStorageSync('userId'),
					selfAnsw: this.topic.selfAnsw
				}
				post_md5('/exam-app/craftbank/saverecord', params, false)
			}
		}
	}
</script>

<style>
	.head {
		border-top: 1px solid #ededed;
	}

	.menu {
		display: flex;
		font-size: 22upx;
		font-weight: 400;
		color: #333333;
		padding: 10upx 100upx;
		margin: 1px 0;
		border-bottom: 1px solid #ededed;
		text-align: center;
	}

	.menu-icon {
		width: 42upx;
		height: 42upx;
	}

	.topic-box {
		padding: 20upx;
		font-size: 28upx;
		font-weight: normal;
		color: #333333;
		line-height: 60upx;
	}

	.correct {
		background: #3ed325;
		color: #ffffff;
		border: 1px #3ed325 solid;
	}

	.mistake {
		background: #ec6663;
		color: #ffffff;
		border: 1px #ec6663 solid;
	}

	.footer {
		height: 98upx;
		font-size: 28upx;
		background: #02a8f4;
	}
</style>
